<template>
    <div class="box">
    <div class="detail-before img-list">
        <img src="https://ss.lanqb.com/4d694e43-7dc8-47be-984b-dd5e22a26434" class="detail-img">
        <img src="https://ss.lanqb.com/fc67163e-d510-4052-bcff-b7663cd832c7" class="detail-img">
        <img src="https://ss.lanqb.com/e31f366e-f2f7-49e0-835f-b9629deffdf8" class="detail-img">
        <img src="https://ss.lanqb.com/54db2cc9-fbe4-49a8-8731-1f5f3854c454" class="detail-img">
        <img src="https://ss.lanqb.com/60fb7c26-8973-4c03-b75b-2b28867c6cdd" class="detail-img">
        <img src="https://ss.lanqb.com/c971296c-b8f3-44b9-8735-9470cbf3616e" class="detail-img">
    </div>
      <div class="detail-center">
          <motai :width="'21.92708333%'" :height="'50%'" :top="0" :left="0" :src="'https://ss.lanqb.com/8cfbf00f-e9f2-458b-9798-a41eb306a0f2.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'50%'" :top="'50%'" :left="0" :src="'https://ss.lanqb.com/563c500e-b077-4d40-9668-722b36ff2eb6.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="0" :left="'21.92708333%'" :src="'https://ss.lanqb.com/5640d15b-d9e7-41a6-8bad-056952df80ba.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="0" :left="'43.85416667%'" :src="'https://ss.lanqb.com/b653e2a1-94fb-40be-8c0e-71b63fe1295f.jpg'"> </motai>
          <motai :width="'34.21875%'" :height="'33.33333333%'" :top="0" :left="'65.78125%'" :src="'https://ss.lanqb.com/b312ada0-9f0f-4851-85e4-254ff83bf6a9.jpg'"> </motai>
          <motai :width="'34.21875%'" :height="'33.33333333%'" :top="'33.33333333%'" :left="'21.92708333%'" :src="'https://ss.lanqb.com/958cf964-fd5d-45ca-8f01-f0f20b77bee2.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="'33.33333333%'" :left="'56.14583333%'" :src="'https://ss.lanqb.com/38715147-eaea-4818-93fe-54c15fb15be5.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="'33.33333333%'" :left="'78.07291667%'" :src="'https://ss.lanqb.com/8b80b2b9-e2a5-4931-8f01-70f11fc9ce0a.jpg'"> </motai>

          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="'66.66666667%'" :left="'21.92708333%'" :src="'https://ss.lanqb.com/010c8e23-758e-4fab-934f-23adb07ff37f.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="'66.66666667%'" :left="'43.85416667%'" :src="'https://ss.lanqb.com/757962cd-4947-461a-9bbf-dc058f879859.jpg'" > </motai>
          <motai :width="'34.21875%'" :height="'33.33333333%'" :top="'66.66666667%'" :left="'65.78125%'" :src="'https://ss.lanqb.com/eb23ec1c-06b3-4f17-89c2-b24dff55d462.jpg'"> </motai>
      </div>

    <div class="detail-after img-list">
        <img src="https://ss.lanqb.com/bfd5d5dd-518c-482c-84cd-5ee46ef3c1bd" class="detail-img">
        <img src="https://ss.lanqb.com/f63f818e-706e-4f2e-81cc-e862c23b59be" class="detail-img">
        <img src="https://ss.lanqb.com/e835be45-e666-4425-ac1a-65bbb002c76b" class="detail-img">
        <img src="https://ss.lanqb.com/558108cb-bb25-4dc8-85c6-1bd451a35754" class="detail-img">
        <img src="https://ss.lanqb.com/23b26e6b-eaab-44a8-aaf4-021aaf233197" class="detail-img">
        <img src="https://ss.lanqb.com/d85adb5f-20e3-4c32-94b7-e7ae2a09506c" class="detail-img">
        <img src="https://ss.lanqb.com/bc801a8c-2c8e-40eb-aa84-8398ece4c11a" class="detail-img">
        <img src="https://ss.lanqb.com/0224d76c-7e08-48e6-886e-e2a429fb648b" class="detail-img">
        <img src="https://ss.lanqb.com/308faa8a-e603-4b6b-a331-298abd9722c1" class="detail-img">
    </div>
    </div>
</template>
<script>
import motai from '@/views/courseDetail/components/motai.vue'
export default {
  components: { motai },

}
</script>
<style lang="scss" scoped>
.box {
  max-width: 1920px;
  margin-right: auto;
  margin-left: auto;
}
.img-list{
  .detail-img {
    display: block;
    width: 100%;
  }
}
.detail-center{
  position: relative;
    width: 100%;
    height: 1002px;
    // width: 1002px;
    margin-right: auto;
    margin-left: auto;
}
</style>